<template>
  <div class="not-select">
    <input
      type="button"
      :value="tmpValue.join('~')"
      name="dateRang"
      :class="className"
      :style="styleName"
      @click="showOrHide"
    />
    <MonthRange
      v-model:visible="visible"
      :min="min"
      :max="max"
      v-model:value="tmpValue"
      :weekInfo="$attrs.weekInfo"
      v-if="type === 'month'"
    />
    <DayRange
      v-model:visible="visible"
      :min="min"
      :max="max"
      v-model:value="tmpValue"
      :weekInfo="$attrs.weekInfo"
      v-if="type === 'day'"
    />
    <WeekRange
      v-model:visible="visible"
      :min="min"
      :max="max"
      v-model:value="tmpValue"
      :weekInfo="$attrs.weekInfo"
      v-if="type === 'week'"
    />
  </div>
</template>
<script>
import { computed, ref, toRefs } from '@vue/reactivity';
import MonthRange from './components/MonthRange.vue';
import DayRange from './components/DayRange.vue';
import WeekRange from './components/WeekRange.vue';
import { watch } from '@vue/runtime-core';
export default {
  name: 'mk-date-range',
  components: {
    MonthRange,
    DayRange,
    WeekRange
  }
};
</script>
<script setup>
let visible = ref(false);

const showOrHide = () => {
  visible.value = !visible.value;
};

//eslint-disable-next-line
const props = defineProps({
  value: Array,
  type: String,
  min: String,
  max: String,
  className: String,
  styleName: String
});
const { value, type, min, max, className, styleName } = toRefs(props);
//eslint-disable-next-line
const emits = defineEmits(['update:value']);
let selectValue = ref(value.value);
watch(value, () => {
  if (value.value.toString() !== selectValue.value.toString()) {
    selectValue.value = value.value;
  }
});
const tmpValue = computed({
  get() {
    return selectValue.value;
  },
  set(val) {
    selectValue.value = val;
    emits('update:value', val);
  }
});
</script>
<style lang="scss" scoped>
.daterang-box {
  padding: 12px;
  position: absolute;
  margin-top: 4px;
  display: none;
  box-shadow: 0px 0px 5px 5px #eeeeee;
  background: #ffffff;
  border-radius: 8px;
}
</style>
<style>
@import url(../../common.css);
</style>
